import {
  defineComponent,
  ref,
  onMounted,
  resolveDirective,
  withDirectives,
  openBlock,
  createElementBlock,
  unref
} from "vue";
import { j as useData, b as useProp } from "./index-CEDaTd93.js";
import { u as useEchart } from "./hooks-aBG276Pf.js";
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "DoughnutPie",
  props: {
    component: {}
  },
  setup(__props) {
    const chartEl = ref(null);
    let globalOption;
    const props = __props;
    let chartData = [];
    const dataChange = (resp, _) => {
      if (resp.status === "SUCCESS") {
        chartData = resp.afterData;
        updateData(chartData);
      } else {
        updateData([]);
      }
    };
    useData(props.component, dataChange);
    const propValueChange = () => {
      updateData(chartData);
    };
    const { updateEchart, resizeHandler } = useEchart(chartEl);
    const { propValue } = useProp(props.component, propValueChange);
    onMounted(async () => {
      globalOption = getOption();
      updateEchart(globalOption);
    });
    const getOption = () => {
      const option = {
        tooltip: {
          trigger: "item"
        },
        legend: {
          orient: propValue.legend.orient || "horizontal",
          left: propValue.legend.left || "right",
          top: propValue.legend.top || "top",
          textStyle: {
            fontSize: propValue.legend.fontSize || 12
          },
          show: propValue.legend.show || false
        },
        title: {
          text: propValue.title.text,
          left: propValue.title.left,
          show: propValue.title.isShow,
          top: propValue.title.top,
          textStyle: {
            fontSize: propValue.title.titleSize
          }
        },
        series: [
          {
            type: "pie",
            radius: ["40%", "70%"],
            data: [],
            top: propValue.area.areatop || "10%",
            left: propValue.area.arealeft || "3%",
            right: propValue.area.arearight || "4%",
            bottom: propValue.area.areadown || "10%",
            label: {
              show: propValue.series.isLabel || false,
              position: propValue.series.lablePosition || "outside",
              fontSize: propValue.series.labeSize || 12,
              formatter: propValue.series.lableFormatter || "{b} : {c} ({d}%)"
            },
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2
            },
            labelLine: {
              show: false
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: "bold"
              }
            }
          }
        ]
      };
      return option;
    };
    const updateData = resp => {
      globalOption = getOption();
      globalOption.series[0].data = resp.data;
      updateEchart(globalOption);
    };
    return (_ctx, _cache) => {
      const _directive_resize = resolveDirective("resize");
      return withDirectives(
        (openBlock(),
        createElementBlock(
          "div",
          {
            ref_key: "chartEl",
            ref: chartEl
          },
          null,
          512
        )),
        [[_directive_resize, unref(resizeHandler)]]
      );
    };
  }
});
export { _sfc_main as default };
